<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>折线图表</title>
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/pear/admin/css/other/console1.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="line1" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="line2" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="line3" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="line4" style="min-height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/pear/component/layui/layui.js"></script>
<script src="/static/pear/component/pear/pear.js"></script>
<script src="/static/pear/echarts/script/line1.js"></script>
<script src="/static/pear/echarts/script/line2.js"></script>
<script src="/static/pear/echarts/script/line3.js"></script>
{#<script src="/static/pear/echarts/script/line4.js"></script>#}

<script>
    layui.use(['echarts'], function() {
        let echarts = layui.echarts;

        var line4 = echarts.init(document.getElementById('line4'), null, {
            width: 600,
            height: 400,
        });

        const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
        // 如果在 js 里面就先请求接口拿到数据,然后再进行渲染
        option = {
            title: {
                text: 'Stacked Line',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {{ "['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']" }},
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410],
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320],
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
            ],
        };

        line4.setOption(option);

        window.onresize = function() {
            line4.resize();
        };

    });

</script>
</body>
</html>
